/**
 * 次卡套餐的列表
 * @author: zxy
 * @update: 2017-03-14
 */

import React, {PropTypes} from 'react';
import {Row, Col, Button, Table, Popconfirm, Pagination, Popover,} from 'antd';

function TimesCardList({
  total, pageNumber, pageSize, loading, dataSource, selectedRowKeys,
  onSelectChange, onAdd, onPageChange, onShowSizeChange,
  onEditItem, onDeleteItem
}) {

  dataSource = [
    {
      time_card_name: '女生节套餐',
      project_name: '疏通经络',
      price_minute: '100/60',
      package_price: '200',
      sell_card_commission: '20',
      is_public: '不公开',
      key: 1,
    },{
      time_card_name: '女生节套餐',
      project_name: '疏通经络',
      price_minute: '100/60',
      package_price: '200',
      sell_card_commission: '50',
      is_public: '不公开',
      key: 2,
    },{
      time_card_name: '女生节套餐',
      project_name: '疏通经络',
      price_minute: '100/60',
      package_price: '300',
      sell_card_commission: '20',
      is_public: '不公开',
      key: 3,
    },{
      time_card_name: '女生节套餐',
      project_name: '疏通经络',
      price_minute: '100/60',
      package_price: '200',
      sell_card_commission: '20',
      is_public: '不公开',
      key: 4,
    },{
      time_card_name: '女生节套餐',
      project_name: '疏通经络',
      price_minute: '100/60',
      package_price: '200',
      sell_card_commission: '20',
      is_public: '不公开',
      key: 5,
    },
  ]


  const columns = [{
    title: '套餐名称',
    dataIndex: 'time_card_name',
    key: 'time_card_name',
    width: 100,
  }, {
    title: '项目名称',
    dataIndex: 'project_name',
    key: 'project_name',
    width: 80,
  }, {
    title: '门市价/分钟',
    dataIndex: 'price_minute',
    key: 'price_minute',
    width: 80,
  }, {
    title: '套餐价',
    dataIndex: 'package_price',
    key: 'package_price',
    width: 100,
    sorter: (a, b) => a.package_price - b.package_price,
  }, {
    title: '售卡提成',
    dataIndex: 'sell_card_commission',
    key: 'sell_card_commission',
    width: 100,
    sorter: (a, b) => a.sell_card_commission - b.sell_card_commission,
  }, {
    title: '是否公开',
    dataIndex: 'is_public',
    key: 'is_public',
    width: 100,
  }, {
    title: '操作',
    dataIndex: 'ope',
    key: 'ope',
    width: 150,
    render: (text, record) => {
      return (
        <Row>
          <Col span={6} offset={6}><a onClick={() => onEditItem(record.project_id)}>编辑</a></Col>
          <Col span={6}><Popconfirm title="确定要删除吗？" onConfirm={() => onDeleteItem(record.project_id)}><a>删除</a></Popconfirm></Col>
        </Row>
      );
    }
  }];

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selection: {},
  };

  const hasSelected = selectedRowKeys.length > 0;

  return (
    <div style={{overflow: 'hidden', padding: '30px 0'}}>
      <Table
        rowSelection={rowSelection}
        columns={columns}
        rowKey={record => record.key}
        dataSource={dataSource}
        loading={loading}
        pagination={false}
        title={
          () =>
            <Row>
              <Col span={12} className="tl">
                <span>批量操作：</span>
                <Popconfirm title='确定要设为不公开吗？' onConfirm={() => onDeleteItem(selectedRowKeys.join(','))}>
                  <Button
                    type="primary"
                    style={{marginLeft: '8px'}}
                    disabled={!hasSelected}
                  >
                    设为不公开
                  </Button>
                </Popconfirm>
                <span
                  style={{marginLeft: '8px'}}>{hasSelected ? `选择了 ${selectedRowKeys.length} 条记录` : ''}</span>
              </Col>
              <Col span={12} className="tr"><Button onClick={onAdd} type="primary" icon="plus">添加套餐</Button></Col>
            </Row>
        }
        bordered
      />
      <Pagination
        className="ant-table-pagination"
        total={total}
        showTotal={total => `共 ${total} 条`}
        current={pageNumber}
        showSizeChanger
        showQuickJumper
        pageSize={pageSize}
        onChange={onPageChange}
        onShowSizeChange={onShowSizeChange}
      />
    </div>
  );
}

TimesCardList.propTypes = {
  total: PropTypes.any,
  pageNumber: PropTypes.any,
  loading: PropTypes.any,
  dataSource: PropTypes.array,
  selectedRowKeys: PropTypes.array,
  onSelectChange: PropTypes.func,
  onPageChange: PropTypes.func,
  onShowSizeChange: PropTypes.func,
  shelvesItem: PropTypes.func,
  offShelvesItem: PropTypes.func,
  onEditItem: PropTypes.func,
  onDeleteItem: PropTypes.func,
};

export default TimesCardList;